import Loading from './Loading.vue';
import Vue from 'vue';
const loadingDirective = {
  inserted(el, binding){
        const loading = Vue.extend(Loading);
        el.instance = new loading({
            el: document.createElement("div")
        });
        const title = binding.arg;
        if(typeof title !== "undefined") el.instance.setTitle(title)
        if(binding.value) append(el);
  },
  update(el, binding){
    if(binding.value !== binding.oldValue) binding.value ? append(el) : remove(el);
  }
}

function append(el){
    const style = getComputedStyle(el);
    if(!['absolute', 'relative', 'fixed'].includes(style.position)) el.style.position = 'relative';
    el.appendChild(el.instance.$el);
}

function remove(el){
    el.style.position = '';
    el.removeChild(el.instance.$el);
}

export default loadingDirective;

